<template>
  <!-- 右菜单栏按钮 -->
  <div class="right_menu_open">></div>
  <!-- 右菜单栏 -->
  <div class="right_menu">
    <div class="right_menu_gone">
      <button class="right_menu_gone_button">X</button>
    </div>
    <div class="people_head">
      <img
          class="people_head_img"
          src="../assets/ciyuan_image/微信图片_20221128110914.jpg"
          alt=""
      />
    </div>
    <div class="people_head_imgShow">
      <img
          class="people_head_imgBig"
          src="../assets/ciyuan_image/微信图片_20221128110914.jpg"
          alt=""
      />
      <div class="people_head_gone">
        <button class="people_head_gone_button">X</button>
      </div>
    </div>
    <div class="people_name">我是张大大</div>
<!--    用户视频信息-->
    <div class="people_video_information">
      <ul class="people_video_information_list">
        <li class='people_publish'><router-link to="">动态 999+</router-link></li>
        <li class="people_concern"><router-link to="">关注 999+</router-link></li>
        <li class="people_fans"><router-link to="">粉丝 999+</router-link></li>
    </ul>
    </div>
    <div class="right_meun_option">
      <ul class="right_meun_option_list">
        <li class="right_maid_option_one" title="发布"><i class="iconfont icon-16" style="color:orange"></i><p class="not_num">发布</p></li>
        <li class="right_maid_option_one" title="收藏"><i class="iconfont icon-jiaxingshoucang"></i><p class="not_num">收藏</p></li>
        <li class="right_maid_option_one" title="待付款"><i class="iconfont icon-xiaoxi1" ><span class="refund_num">0</span></i><p>消息/通知</p></li>
        <li class="right_maid_option_one" title="足迹"><i class="iconfont icon-zuji" ></i><p class="not_num">足迹</p></li>
      </ul>
    </div>
    <div class="right_maid_option">
      <ul class="right_maid_option_list">
        <li class="right_maid_option_one" title="离线缓存"><i class="iconfont icon-yunxiazai" ></i><p class="not_num">离线缓存</p></li>


        <li class="right_maid_option_one" title="待付款"><i class="iconfont icon-rengongkefu" ></i><p class="not_num">官方客服</p></li>
        <li class="right_maid_option_one" title="待付款"><i class="iconfont icon-huodong1" ></i><p class="not_num">活动</p></li>
      </ul>
    </div>
  </div>
  <HHead></HHead>
<!--  查找拦-->
  <div class="find_menu">
    <div class="find">
      <div class="video_find_option">
        <div class="video_option_text">作者</div>
        <div class="video_switch"></div>
      </div>
      <input
          type="text"
          placeholder=" 请输入您想查找的视频"
          class="video_input_text"
          name="video_find_text"
      />
    </div>
  </div>
<!--  宣传栏-->
  <!-- 广告位 -->
  <div class="block text-center">
    <el-carousel trigger="click" height="200px" class="cd_home main-el-carousel" >
      <el-carousel-item v-for="item in this.other_picture_list" :key="item" class="main-el-carousel-item">
        <!--        <h3 class="small justify-center" text="2xl">热门活动</h3>-->
        <img :src="item.src" alt=" " class="main-el-carousel-item-img">
      </el-carousel-item>
    </el-carousel>
  </div>
<!--  视频拦-->
  <div class="video_maid">
    <ul class="video_maid_list">
      <li class="video_maid_one">
        <router-link to="">
        <img src="https://img2.baidu.com/it/u=2509898971,3113467475&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=276" alt="" class="video_image">
          <div class="video_duration">3:20</div>
        <div class="video_information">
          <div class="video_information_div">
            <i class="iconfont icon-bofangshu"></i>
            <span class="video_watch">9999+</span>
          </div>
          <div class="video_information_div">
          <i class="iconfont icon-bixin"></i>
          <span class="video_like">9999+</span>
          </div>
          <div class="video_information_div">
          <i class="iconfont icon-pinglun"></i>
          <span class="video_appraise">9999+</span>
          </div>
        </div>
          <div class="video_introduce">
            <span class="video_introduce_text">4K60帧鬼灭之刃一战封神 极限画质挑战</span>
          </div>
          <div class="video_author">
            <span class="video_author_name"><i  class="iconfont icon-UPzhu"></i>袋楼</span>
            <span class="video_publish_time"><i  class="iconfont icon-icon_fabushijian"></i>2023-11-11</span>
          </div>
        </router-link>
      </li>
      <li class="video_maid_one">
        <router-link to="">
          <img src="https://img1.baidu.com/it/u=1243465357,37517538&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" class="video_image">
          <div class="video_duration">3:20</div>
          <div class="video_information">
            <div class="video_information_div">
              <i class="iconfont icon-bofangshu"></i>
              <span class="video_watch">9999+</span>
            </div>
            <div class="video_information_div">
              <i class="iconfont icon-bixin"></i>
              <span class="video_like">9999+</span>
            </div>
            <div class="video_information_div">
              <i class="iconfont icon-pinglun"></i>
              <span class="video_appraise">9999+</span>
            </div>
          </div>
          <div class="video_introduce">
            <span class="video_introduce_text">“只因你看过灵能百分百，所以才能明白这个视频的分量...”</span>
          </div>
          <div class="video_author">
            <span class="video_author_name"><i  class="iconfont icon-UPzhu"></i>米楼</span>
            <span class="video_publish_time"><i  class="iconfont icon-icon_fabushijian"></i>2022-08-22</span>
          </div>
        </router-link>
      </li>
      <li class="video_maid_one">
      <router-link to="">
        <img src="https://img1.baidu.com/it/u=1495469754,3694791395&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=450" alt="" class="video_image">
        <div class="video_duration">3:20</div>
        <div class="video_information">
          <div class="video_information_div">
            <i class="iconfont icon-bofangshu"></i>
            <span class="video_watch">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-bixin"></i>
            <span class="video_like">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-pinglun"></i>
            <span class="video_appraise">9999+</span>
          </div>
        </div>
        <div class="video_introduce">
          <span class="video_introduce_text">转发这个视频来恶心你身边喜欢蜘蛛侠的朋友</span>
        </div>
        <div class="video_author">
          <span class="video_author_name"><i  class="iconfont icon-UPzhu"></i>袋几</span>
          <span class="video_publish_time"><i  class="iconfont icon-icon_fabushijian"></i>2022-06-02</span>
        </div>
      </router-link>
    </li>
      <li class="video_maid_one">
      <router-link to="">
        <img src="https://img2.baidu.com/it/u=3091395828,4094696213&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=720" alt="" class="video_image">
        <div class="video_duration">3:20</div>
        <div class="video_information">
          <div class="video_information_div">
            <i class="iconfont icon-bofangshu"></i>
            <span class="video_watch">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-bixin"></i>
            <span class="video_like">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-pinglun"></i>
            <span class="video_appraise">9999+</span>
          </div>
        </div>
        <div class="video_introduce">
          <span class="video_introduce_text">燃！炭治郎至今用过的火之神神乐合集！纵使我身形俱灭，也定将恶鬼斩杀「鬼灭之刃/炭治郎」</span>
        </div>
        <div class="video_author">
          <span class="video_author_name"><i  class="iconfont icon-UPzhu"></i>扛楼</span>
          <span class="video_publish_time"><i  class="iconfont icon-icon_fabushijian"></i>2022-05-08</span>
        </div>
      </router-link>
    </li>
      <li class="video_maid_one">
      <router-link to="">
        <img src="https://img2.baidu.com/it/u=3768585135,1763966090&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="" class="video_image">
        <div class="video_duration">3:20</div>
        <div class="video_information">
          <div class="video_information_div">
            <i class="iconfont icon-bofangshu"></i>
            <span class="video_watch">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-bixin"></i>
            <span class="video_like">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-pinglun"></i>
            <span class="video_appraise">9999+</span>
          </div>
        </div>
        <div class="video_introduce">
          <span class="video_introduce_text">一口气看完《龙珠》动画+漫画全集（更新中...）</span>
        </div>
        <div class="video_author">
          <span class="video_author_name"><i  class="iconfont icon-UPzhu"></i>袋米</span>
          <span class="video_publish_time"><i  class="iconfont icon-icon_fabushijian"></i>2021-12-12</span>
        </div>
      </router-link>
    </li>
      <li class="video_maid_one">
      <router-link to="">
        <img src="https://img2.baidu.com/it/u=2025072670,3355313200&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500" alt="" class="video_image">
        <div class="video_duration">3:20</div>
        <div class="video_information">
          <div class="video_information_div">
            <i class="iconfont icon-bofangshu"></i>
            <span class="video_watch">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-bixin"></i>
            <span class="video_like">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-pinglun"></i>
            <span class="video_appraise">9999+</span>
          </div>
        </div>
        <div class="video_introduce">
          <span class="video_introduce_text">咒术回战 0 剧场版 (解说+正片12分19秒开始） 重制版</span>
        </div>
        <div class="video_author">
          <span class="video_author_name"><i  class="iconfont icon-UPzhu"></i>几楼</span>
          <span class="video_publish_time"><i  class="iconfont icon-icon_fabushijian"></i>2023-01-02</span>
        </div>
      </router-link>
    </li>
      <li class="video_maid_one">
      <router-link to="">
        <img src="https://img1.baidu.com/it/u=1868409968,1479110050&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt="" class="video_image">
        <div class="video_duration">3:20</div>
        <div class="video_information">
          <div class="video_information_div">
            <i class="iconfont icon-bofangshu"></i>
            <span class="video_watch">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-bixin"></i>
            <span class="video_like">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-pinglun"></i>
            <span class="video_appraise">9999+</span>
          </div>
        </div>
        <div class="video_introduce">
          <span class="video_introduce_text">咒术回战最强四大特级咒术师，全面解析过往和能力设定</span>
        </div>
        <div class="video_author">
          <span class="video_author_name"><i  class="iconfont icon-UPzhu"></i>米几</span>
          <span class="video_publish_time"><i  class="iconfont icon-icon_fabushijian"></i>2022-12-02</span>
        </div>
      </router-link>
    </li>
      <li class="video_maid_one">
      <router-link to="">
        <img src="https://img0.baidu.com/it/u=2926206230,3683453001&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="" class="video_image">
        <div class="video_duration">3:20</div>
        <div class="video_information">
          <div class="video_information_div">
            <i class="iconfont icon-bofangshu"></i>
            <span class="video_watch">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-bixin"></i>
            <span class="video_like">9999+</span>
          </div>
          <div class="video_information_div">
            <i class="iconfont icon-pinglun"></i>
            <span class="video_appraise">9999+</span>
          </div>
        </div>
        <div class="video_introduce">
          <span class="video_introduce_text">当你在看灵能百分百时，朋友走进来..........</span>
        </div>
        <div class="video_author">
          <span class="video_author_name"><i  class="iconfont icon-UPzhu"></i>一楼</span>
          <span class="video_publish_time"><i  class="iconfont icon-icon_fabushijian"></i>2023-05-22</span>
        </div>
      </router-link>
    </li>
    </ul>
  </div>
</template>
<script>
import HHead from "@/components/HHead";
import $ from "jquery";
import {mapState} from "vuex";

export default {
  name: 'video_maid',
  components: {HHead},
  watch:{
    // $route(){
    //   this.$router().go()
    // }
  },
  computed:{
    ...mapState(['other_picture_list'])
  }
}
$(function () {
  let video_count = 0;
  $(".video_switch").on("click", function () {
    video_count++;
    if (video_count % 2 !== 0) {
      $('.video_option_text').text("视频").css({
        transform: "translateX(5px) translateY(20px)",
        transition: "1s",
      });
      $('.video_input_text').attr("placeholder", " 请输入您想查找的作者");
      $('.video_switch').css({
        "background-color": "#fff",
        transform: "translateX(69px) translateY(-40px)",
        transition: "1s",
      });
      $(".video_find_option").css({
        "background-color": " rgba(145, 233, 14, 0.443)",
        "box-shadow": "0px 0px 6px rgba(145, 233, 14, 0.443)",
      });
    } else if (video_count % 2 === 0 || video_count === 0) {
      $('.video_option_text').text("作者").css({
        transform: "translateX(83px) translateY(20px)",
        transition: "1s",
      });
      $(".video_input_text").attr("placeholder", " 请输入您想查找的视频");
      $(".video_switch").css({
        transform: "translateX(-2px) translateY(-40px)",
        transition: "1s",
        "background-color": "#fff",
      });
      $(".video_find_option").css({
        "background-color": "rgba(255, 0, 0, 0.567)",
        "box-shadow": "0px 0px 6px #666666b1",
      });
    }
  });
  //right_menu
  $(function () {
    $(".right_menu_gone_button").on("click", function () {
      $(".right_menu_open").css({
        transform: "rotate(180deg) translateX(0px)",
        transition: "3s",
      });
      $(".right_menu").css({
        // display: "none",
        transform: "translateX(400px)",
        transition: "1s",
      });
    });
    $(".right_menu_open").on("click", function () {
      $(".right_menu_open").css({
        transform: "rotate(180deg) translateX(-40px)",
        transition: "1s",
      });
      $(".right_menu").css({
        // display: "none",
        transform: "translateX(0px)",
        transition: "3s",
      });
    });
    $(".right_meun_option_one").on("mouseout", function () {
      $(".right_meun_option_one").css({
        transition: "1s",
      });
    });
    $(".right_meun_option").on("mouseout", function () {
      $(".right_meun_option").css({
        transition: "1s",
      });
    });
    $(".right_maid_option_one").on("mouseout", function () {
      $(".right_maid_option_one").css({
        transition: "1s",
      });
    });
    $(".right_maid_option").on("mouseout", function () {
      $(".right_maid_option").css({
        transition: "1s",
      });
    });
    $(".people_head_img").on("click", function () {
      $(".people_head_imgShow").css({
        display: "block",
      });
    });
    $(".people_head_gone").on("click", function () {
      $(".people_head_imgShow").css({
        display: "none",
      });
    });
  })
// 视频信息
  $(".people_video_information_list>li").on("mouseout", function () {
    $(".people_video_information_list>li").css({
      transition: "1s",
    });
  });
  $(".video_maid_one").on("mouseout", function () {
    $(".video_maid_one").css({
      transition: "1s",
    });
  });
  $(".video_maid").on("mouseout", function () {
    $(".video_maid").css({
      transition: "1s",
    });
  });
})
</script>
